<template>
  <div>
    <div>
      <div style="width: 15%; display: inline-block"></div>
      <div
        style="
          width: 70%;
          display: inline-block;
          background-color: #fff;
          box-shadow: 2px 2px 10px 2px #ddd;
          margin-top: 20px;
          height: 800px;
        "
      >
        <div class="info">
          <p
            style="
              font-size: 20px;
              font-weight: bold;
              font-weight: bold;
              font-weight: bold;
            "
          >
            基本信息
          </p>
        </div>
        <div class="info">
          <p style="float: left; margin-top: 30px; font-weight: bold">头像</p>
          <img
            :src="img"
            alt=""
            style="
              clear: left;
              margin-left: 30px;
              border-radius: 50px;
              width: 100px;
              height: 100px;
            "
            :key="key"
          />
          <div
            style="
              width: 200px;
              height: 100px;
              float: right;
              margin-right: 600px;
            "
          >
            <a-upload
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              @change="handleChange"
              style="float: right"
            >
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
              <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
          </div>
        </div>
        <div class="info">
          <p style="float: left; font-weight: bold">昵称</p>
          <p style="margin-left: 50px" v-if="!lrcode">{{ userName }}</p>
          <a-input type="text" class="input" v-if="lrcode" :value="userName" />
        </div>
        <div class="info">
          <p style="float: left; font-weight: bold">性别</p>
          <p style="margin-left: 50px" v-if="!lrcode">{{ sex }}</p>
          <a-form-model-item
            label="Activity type"
            style="clear: left; margin-left: 20px"
            v-if="lrcode"
          >
            <a-checkbox
              name="man"
              @change="onChangeMan"
              :indeterminate="mindeterminate"
            >
              男
            </a-checkbox>
            <a-checkbox
              name="woman"
              @change="onChangeWoman"
              :indeterminate="findeterminate"
            >
              女
            </a-checkbox>
          </a-form-model-item>
        </div>
        <div class="info">
          <p style="float: left; font-weight: bold">年龄</p>
          <p style="margin-left: 50px">{{ old }}</p>
          <!-- <a-input
            type="text"
            style="clear: left; margin-left: 20px; width: 50px"
            v-if="lrcode"
            v-model:value="old"
          /> -->
        </div>
        <div class="info">
          <p style="font-size: 20px; font-weight: bold">其他信息</p>
        </div>
        <div class="info">
          <p style="float: left; font-weight: bold">职业</p>
          <p style="margin-left: 50px" v-if="!lrcode">{{ occupation }}</p>
          <a-select
            :default-value="occupation"
            style="
              width: 120px;
              clear: left;
              margin-left: 20px;
              margin-top: -10px;
            "
            v-if="lrcode"
            :value="occupation"
          >
            <a-select-option value="教师"> 教师 </a-select-option>
            <a-select-option value="工人"> 工人 </a-select-option>
            <a-select-option value="大学生"> 大学生 </a-select-option>
            <a-select-option value="小屁孩"> 小屁孩 </a-select-option>
            <a-select-option value="无业"> 无业 </a-select-option>
          </a-select>
        </div>
        <div class="info">
          <p style="font-weight: bold">个人简介</p>
          <p v-if="!lrcode" style="text-indent: 2em">{{ briefIntroduction }}</p>
          <a-input
            type="text"
            v-if="lrcode"
            :value="briefIntroduction"
            style="width: 500px; height: 150px; text-indent: 2em"
          />
        </div>
        <div style="margin-left: 30px">
          <a-button @click="changeInfo" v-if="!lrcode">修改个人资料</a-button>
          <a-button @click="changeOk" v-if="lrcode" class="button"
            >确认</a-button
          >
          <a-button @click="changeInfo" v-if="lrcode" class="button"
            >取消</a-button
          >
        </div>
      </div>
      <div style="width: 15%; display: inline-block"></div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => resolve(reader.result);

    reader.onerror = (error) => reject(error);
  });
}
export default {
  data() {
    return {
      uid: this.$store.state.uid,
      lrcode: 0,
      briefIntroduction: "",
      occupation: "",
      sex: "",
      userName: "",
      old: 18,
      id: "",
      exit: 0,
      key: 0,
      // 头像上传
      loading: false,
      imageUrl: "",
      img: "",
      findeterminate: false,
      mindeterminate: false,
    };
  },
  setup() {
    const previewVisible = ref(false);
    const previewImage = ref("");
    const previewTitle = ref("");
    const fileList = ref([]);

    const handleCancel = () => {
      previewVisible.value = false;
      previewTitle.value = "";
    };

    const handlePreview = async (file) => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }

      previewImage.value = file.url || file.preview;
      previewVisible.value = true;
      previewTitle.value =
        file.name || file.url.substring(file.url.lastIndexOf("/") + 1);

      console.log(
        "选择文件-----------------------------------------------------------"
      );
      console.log(previewImage.value);
      console.log(previewVisible.value);
      console.log(previewTitle.value);
    };
    return {
      previewVisible,
      previewImage,
      fileList,
      handleCancel,
      handlePreview,
      previewTitle,
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    handleChange(info) {
      let formData = new FormData();
      formData.append("head", info.file.originFileObj);
      formData.append("id", this.id);
      console.log(this.id);
      console.log(formData);
      this.$axios.post("/user/uploadHead", formData).then((res) => {
        this.img =
          "http://47.108.176.163:7777/img_user_head/" + this.id + ".png";
        console.log(res);
      });
      this.key += 1;
    },
    getUser() {
      const url = "/user/selectOneByUid?uid=" + this.$store.state.uid;
      this.$axios({
        method: "get",
        url: url,
      })
        .then((res) => {
          console.log(res);
          this.briefIntroduction = res.data.data.briefIntroduction;
          this.occupation = res.data.data.occupation;
          this.sex = res.data.data.sex;
          this.userName = res.data.data.userName;
          this.id = res.data.data.id;
          this.img =
            "http://47.108.176.163:7777/img_user_head/" +
            res.data.data.id +
            ".png";
          if (this.sex == "男") {
            this.mindeterminate = true;
            this.findeterminate = false;
          } else {
            this.mindeterminate = false;
            this.findeterminate = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeInfo() {
      const url = "/user/selectOneByUid?uid=" + this.$store.state.uid;
      this.$axios({
        method: "get",
        url: url,
      })
        .then((res) => {
          console.log(res);
          this.briefIntroduction = res.data.data.briefIntroduction;
          this.occupation = res.data.data.occupation;
          this.sex = res.data.data.sex;
          this.userName = res.data.data.userName;
          this.id = res.data.data.id;
          this.img =
            "http://47.108.176.163:7777/img_user_head/" +
            res.data.data.id +
            ".png";
          this.lrcode = !this.lrcode;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeOk() {
      const data = {
        uid: this.uid,
        briefIntroduction: this.briefIntroduction,
        occupation: this.occupation,
        sex: this.sex,
        userName: this.userName,
        id: this.id,
      };
      this.$axios({
        method: "post",
        url: "/user/update",
        data,
      })
        .then((res) => {
          console.log(res);
          this.changeInfo();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeActive() {
      this.exit = 1;
    },
    removeActive() {
      this.exit = 1;
    },
    exits() {
      this.$router.push({ name: "Login", params: {} });
    },
    user() {
      this.$router.push({ name: "Info", params: {} });
    },
    addForum() {
      try {
        let formData = new FormData();
        for (let i = 0; i < this.fileList.length; i++) {
          formData.append("head", this.fileList[i].originFileObj);
        }
        formData.append("id", this.id * 1);
        // console.log(formData.get("id"));
        // console.log(formData.get("imgs"));
        console.log(formData);
        let img_res = this.$axios.post("/user/uploadHead", formData);
        console.log(img_res);
      } catch (error) {
        console.log(error);
      }
    },
    onChangeMan() {
      this.sex = "男";
      this.mindeterminate = true;
      this.findeterminate = false;
    },
    onChangeWoman() {
      this.sex = "女";
      this.mindeterminate = false;
      this.findeterminate = true;
    },
  },
};
</script>

<style scoped>
#user {
  background-color: rgb(93, 134, 145);
  height: 40px;
  width: 100%;
}
.info {
  margin-top: 30px;
  clear: left;
  margin-left: 30px;
}
.input {
  clear: left;
  margin-left: 20px;
  width: 150px;
}
.button {
  width: 80px;
  margin-top: 15px;
  margin-left: 30px;
}
.userMore:hover {
  opacity: 0.8;
}
</style>
